<template>
	<div class="album-list maxW">

		<div v-if="!isMulti || (isMulti && isSchool)">
            <template>
                <singleCascader @resChosed="resChosed"></singleCascader>
            </template>
		</div>

		<div :class="[{'margin-top20':isMulti},'carousel-part clear']">
			<div class="caurse-carousel fl">
				<template>
					<el-carousel :interval="5000" height="400px">
						<el-carousel-item v-for="(item, index) in carouselPicData" :key="index">
							<a :href="item.link_url==''?false:item.link_url" :target="item.link_url == '' ? '_Self' : '_Blank'"><img :src="BASE_URL + item.picture" /></a>
						</el-carousel-item>
					</el-carousel>
				</template>
			</div>
			<div class="popularity-list fr">
				<el-card class="box-card" shadow="never">
					<div slot="header" class="clearfix"><span class="humantitle">人气</span></div>
					<div v-for="(item, index) in humanQiData" :key="index" class="text item humanItem">
						<i :class="[index + 1 < 4 ? 'humanNun yellowC' : 'humanNun']">{{ index + 1 }}</i>
						<router-link :to="{ path: 'albumDetail', query: { id: item.albumid } }" :title="item.name">{{ item.name }}</router-link>
					</div>
					<div class="dependent1" v-if="placeholder1">
						<i class="ipng image_state01"></i>
						<p>还没发现任何相关的课程哦~</p>
					</div>
				</el-card>
			</div>
		</div>
		<div class="album-list-box">
			<div class="filter-nav">
				<el-button type="text" :class="[orderType == 'time' ? 'blueC' : '']" @click="toggle_order('time')">最新上传</el-button>
				<i class="cut">|</i>
				<el-button type="text" :class="[orderType == 'hot' ? 'blueC' : '']" @click="toggle_order('hot')">最高热度</el-button>
			</div>
			<ul>
				<!-- 多级 -->
				<!-- <template v-if="isMulti"> -->
					<ablumRow :opctions="albumListData"></ablumRow>

				<!-- </template>
				<template v-else>
					<li class="i_groupLs box" v-for="(item, index) of albumListData" :key="index">
						<div class="i_groupLs_img">
							<router-link :to="{ path: 'albumDetail', query: { id: item.albumid } }"><img :src="BASE_URL + item.picture" :onerror="errorImg" /></router-link>
						</div>
						<div class="i_groupLs_if">
							<div class="i_groupLs_info clear">
								<router-link :to="{ path: 'albumDetail', query: { id: item.albumid } }" :title="item.name">{{ item.name }}</router-link>
								<div class="i_sumBook">
									<span>{{ item.videocount }}门课程</span>
								</div>
								<div class="schoolInfo clear">
									<router-link :to="{ path: '/teach/space', query: { id: item.create_id } }" class="creater">
										<img class="acatar_img" :src="BASE_URL + item.avatar_path" alt="头像" />
										<span>{{ item.createname }}</span>
									</router-link>
									<span class="fr">
										{{ item.studyname }}
										<i>.</i>
										{{ item.subjectname }}
									</span>
								</div>
							</div>
						</div>
					</li>
				</template> -->
			</ul>
			<div class="pageBox album-list-pagination">
				<el-pagination
					v-if="total_number > page_size"
					@current-change="change_page"
					:page-size="page_size"
					:current-page="page_index"
					layout="total,prev, pager, next,jumper"
					:total="total_number"
				></el-pagination>
			</div>

		</div>
	</div>
</template>

<script>
import singleCascader from "@/components/common/single-cascader";
import ablumRow from '../base/album-row'
export default {
    components: {
		singleCascader,
		ablumRow
    },
	data() {
		return {
			placeholder1: false,
			page_index: 1,
			page_size: 8,
			total_number: 0,
			orderType: 'time',
			study_section_id: 0,
			grade_id: 0,
			subject_id: 0,
			version_id: 0, //版本
			keyword: this.$route.query.keyword, //首页搜索跳转到此页面时带的关键字
			create_id: 0,
			sectionData: [],
			gradeData: [],
			subjectList: [],
			errorImg: 'this.src="' + require('../../../../public/images/image_loding.png') + '"',
			checked: false,
			subjectChecked: 0,
			gradeChecked: 0,
			sectionChecked: 0,
			albumListData: [],
			carouselPicData: [],
			humanQiData: []
		};
	},
	watch: {
		"$route.query.keyword"(nv) {
      this.keyword = nv;
      this.getAlbumData();
    },
	},
	created() {
		this.getCarouselPic();
		this.getAlbumData();
		this.humanQi();
	},
	mounted() {
		this.getCarouselPic();
	},
    computed: {
		isSchool(){
          	return this.$store.getters.isSchool;
		},  
		isMulti(){
			return this.$store.getters.isMulti;
		}  
    },    
	methods: {
		getAlbumData() {
			let success = res => {
				const flag = Object.keys(res.data).includes('data');
				const data = flag ? res.data.data : res.data;
				const pleaceholder = new Array(8 - data.length);
				this.albumListData = [...data,...pleaceholder];
				this.total_number = Object.keys(res.data).includes('data_sum') ? res.data.data_sum : res.data.data.data_sum;
			};
			this.$ajax({
				url: 'api/album/albums_list',
				method: 'get',
				params: {
					flag: 'home',
					order_type: this.orderType,
					page_index: this.page_index,
					page_size: this.page_size,
					study_section_id: this.study_section_id,
					grade_id: this.grade_id,
					subject_id: this.subject_id,
					keyword: this.keyword
				},
				func: { success: success }
			});
        },
        resChosed(obj){
            this.study_section_id = obj.study_section_id;
            this.grade_id = obj.grade_id;
            this.subject_id = obj.subject_id;
            this.page_index = 1;
            this.getAlbumData();
        },
		//轮播图
		getCarouselPic() {
			let success = res => {
				this.carouselPicData = deep_clone(res.data);
			};
			this.$ajax({
				url: 'api/carousel/banners',
				method: 'get',
				params: {
					module: 3
				},
				func: { success: success }
			});
		},
		//人气
		humanQi() {
			let success = res => {
				this.humanQiData = res.data.data;
				this.placeholder1 = res.data.data.length === 0;
			};
			let params = {
				flag: 'home',
				page_index: 1,
				page_size: 10,
				order_type: 'hot'
			};
			this.$ajax.get('api/album/albums_list', {
				params,
				func: { success: success }
			});
		},
		toggle_order(type) {
			this.orderType = type;
			this.getAlbumData();
		},

		change_page(val) {
			this.page_index = val;
			this.getAlbumData();
		}
	}
};
</script>
<style lang="scss">

.album-list-box {
	margin: 20px 0 40px;
	.i_groupLs:hover {
		-webkit-box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
	}
}
.album-list-box > ul:after {
	content: '';
	height: 0;
	clear: both;
	overflow: hidden;
	display: block;
	zoom: 1;
}

.i_groupLs .i_groupLs_if > a,
.i_groupLs .i_groupLs_if > p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.i_groupLs {
	float: left;
	width: 290px;
	height: 205px;
	border-radius: 3px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin: 0 13px 20px 0;
	background: #fff;

	-moz-transition: all 0.35s ease-in;
	-webkit-transition: all 0.35s ease-in;
	-o-transition: all 0.35s ease-in;
	transition: all 0.35s ease-in;
}
.i_groupLs:hover > .i_groupLs_if {
	-webkit-transform: translate3d(0, -40px, 0);
	-moz-transform: translate3d(0, -40px, 0);
	transform: translate3d(0, -40px, 0);
}
.i_groupLs:hover .i_groupLs_info > a {
	color: #348efc;
}
.i_groupLs:hover > .i_groupLs_img {
	-webkit-transform: translate3d(0, -20px, 0);
	-moz-transform: translate3d(0, -20px, 0);
	transform: translate3d(0, -20px, 0);
}
.i_groupLs .i_groupLs_img {
	height: 140px;
	display: block;
	overflow: hidden;
	transition: all 0.25s ease-in;
}
.i_groupLs .i_groupLs_img a,
.i_groupLs .i_groupLs_img img {
	width: 100%;
	height: 100%;
	vertical-align: top;
}
.i_groupLs_img a {
	position: relative;
}
.i_groupLs_img a::after {
	content: '';
	opacity: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 2%, rgba(0, 0, 0, 0.2));
	transition: opacity 0.4s ease-in-out;
	position: absolute;
	top: 2px;
	left: 0;
	width: 100%;
	height: 140px;
}
.i_groupLs_img:hover > a:after {
	opacity: 1;
}

.i_groupLs .i_groupLs_if {
	padding: 0 10px 20px;
	background: #ffffff;
	transition: all 0.25s ease-in;
}
.i_groupLs .i_groupLs_if > a {
	font-size: 14px;
	color: #020202;
	line-height: 20px;
	padding-top: 13px;
	display: block;
	cursor: pointer;
}
.i_groupLs .i_groupLs_if .i_groupLs:hover {
	box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
}
.i_groupLs:nth-of-type(4n) {
	margin: 0 0 18px 0;
}
.i_groupLs_info {
	margin-top: 10px;
	height: 25px;
	line-height: 25px;
	.i_sumBook {
		height: 30px;
		color: #888;
	}
	.acatar_img {
		display: inline-block;
		vertical-align: middle;
		width: 25px;
		height: 25px;
		-moz-border-radius: 50%;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 5px;
	}
	.schoolInfo {
		color: #4c8edc;
		cursor: pointer;
		i {
			margin: 0 5px;
		}
        .creater{
            display: inline-block;
            width: 120px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
	}
}
.i_groupLs_info > a {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.carousel-part {
    &.margin-top20{
        margin-top: 20px;
    }
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
	.el-carousel__button {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}
	.caurse-carousel {
		display: inline-block;
		width: 860px;
		height: 400px;
		img {
			height: 100%;
		}
	}
	.el-carousel {
		border-radius: 3px;
	}
	.popularity-list {
		display: inline-block;
		width: 320px;
		background-color: #fff;

		.humantitle {
			padding: 5px 8px;
			border-radius: 2px;
			font-size: 14px;
			color: #fff;
			background-color: #338efc;
		}
		.el-card__header {
			padding: 25px 10px;
			margin: 0 8px;
			border-bottom: solid 2px #e5e5e5;
		}
		.el-card__body {
			height: 299px;
			padding: 15px 20px 20px;
		}
		.humanItem {
			padding: 5px 0;
		}
		.humanItem i {
			border-radius: 4px;
		}
		.humanItem a {
			display: inline-block;
			width: 80%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.humanItem:hover {
			background-color: #effaff;
		}
		.humanItem:hover > a {
			color: #348efc;
		}

		.humanNun {
			display: inline-block;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			color: #ffffff;
			background: #d2d2d2;
			margin-right: 10px;
		}
		.humanNun.yellowC {
			background: #f2b732;
		}
	}
}
.filter-nav {
	padding: 10px;
	.el-button {
		font-size: 16px;
		color: #000;
	}
	.el-icon-sort-down {
		margin-left: 5px;
	}
	.cut {
		margin: 0 20px;
		color: #d2d2d2;
	}
	.blueC {
		color: #338efc;
	}
}

.dependent {
	background-color: #fff;
	text-align: center;
	overflow: hidden;
	margin-bottom: 50px;
	padding-top: 30px;
	p {
		color: #999;
		margin: 40px 0;
	}
}

.dependent1 {
	text-align: center;
	color: #999;
	i {
		margin: 30px 0;
	}
}
.album-list-pagination{
	padding-top: 30px;
}
</style>
